<template>
  <div class="lawyer-modify-password pb">
    <div class="bg-c-fff">
      <h2 class="box-title rel">修改密码</h2>
      <form action="">
        <ul>
          <li>
            <span>原密码：</span>
            <input type="password" placeholder="请输入原密码" class="input-css input-w1" v-model="oldPassWorld">
            <i class="iconfont icon-asterisk"></i>
          </li>
          <li>
            <span>新密码：</span>
            <input type="password" placeholder="字母+数字组合" class="input-css input-w1" v-model="passWord">
            <i class="iconfont icon-asterisk"></i>
          </li>
          <li>
            <span>确认密码：</span>
            <input type="password" placeholder="字母+数字组合" class="input-css input-w1" v-model="passWords">
            <i class="iconfont icon-asterisk"></i>
          </li>
          <li>
            <div class="preview-box">
              <input type="button" value="保存" class="submit button-css cup" @click="onBindClick">
              <input type="button" value="取消" class="submit white-button cup" @click="onCancel">
            </div>
          </li>
        </ul>
      </form>
    </div>
  </div>
</template>
<script type="text/javascript">
export default {
  data() {
    return {
      oldPassWorld: '',
      passWord: '',
      passWords: ''
    }
  },
  methods: {
    onBindClick() {
      if (!this.passWord) {
        this.$toasted.show('密码不能为空')
        return
      }
      if (this.passWord.length > 24) {
        this.$toasted.show('密码不要超过24个字')
        return
      }
      if (this.passWord.length < 6) {
        this.$toasted.show('密码不能少于6个字')
        return
      }
      // var myreg = /^[0-9a-zA-Z]{6, 24}$/
      // if (!myreg.test(this.passWord)) {
      //   this.$toasted.show('请输入6-24位的字母+数字组合')
      //   return
      // }
      if (this.passWord !== this.passWords) {
        this.$toasted.show('两次输入的密码不同')
        return
      }
      this.$http.post('/member/modifyPassWord', {
        oldPassword: this.oldPassWorld,
        newPassWord: this.passWord
      }).then(data => {
        if (data.data.httpCode === 200) {
          this.$toasted.show('密码修改成功')
          this.$router.push('/login')
        } else {
          this.$toasted.show(data.data.msg)
        }
      }).catch(err => {
        console.log(err)
        this.$toasted.show('网络错误')
      })
    },
    onCancel() {
      this.$router.push('/welcomelawfirm')
    }
  }
}

</script>
<style type="text/css" scoped>
.pb {
  padding-bottom: 20px;
}

.lawyer-modify-password ul {
  padding-bottom: 144px;
  margin-top: 50px;
}

.lawyer-modify-password ul li {
  padding: 10px 0;
}

.lawyer-modify-password ul li span {
  width: 194px;
  display: inline-block;
  text-align: right;
  color: #666666;
  margin-right: 20px;
}

.icon-asterisk {
  position: relative;
  right: 35px;
  color: #ec5303;
  font-size: 25px;
  top: 3px;
}

.remarks {
  padding-left: 216px;
  color: #01378c;
  line-height: 17px;
  margin-top: 15px;
}

.preview-box {
  margin-left: 217px;
}

.preview-box .submit {
  width: 163px;
}

.preview-box input:nth-of-type(1) {
  margin-right: 20px;
}

input::-webkit-input-placeholder {
  color: #a5a5a5;
}

</style>
